import SelectShopModal from '@/pages/OrderModule/common/bizcomponents/SelectShopModal';
import CommonTable from '@/components/CommonTable';
import { CommonForm } from '@/pages/OrderModule/common/components/CommonForm';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import CommonTextarea from '@/pages/OrderModule/common/components/CommonTextarea';
// import Typography as  from '@/pages/OrderModule/common/components/Typography';
import { Alert, Col, Form, Row, Select, Typography, Modal, message } from 'antd';
import { useState } from 'react';
import { manualPullOrderOp } from '../../../../services';
import Style from './index.module.less';

const { Option } = Select;
const { Paragraph } = Typography;

function ManuallySyncOrdersModal(props) {
  const [form] = Form.useForm();

  //网店列表
  const [shopList, setShopList] = useState([]);

  function handleOk() {
    form.validateFields().then(async value=>{
      const { storeId, outOrderSn } = value;
      const list = outOrderSn?.split('\n').filter(item => item.replace(/ /g, ''));
      if(!list?.length){
        return message.info('请先输入三方网店订单号');
       }
       if(list?.length > 30){
        return message.info('最多输入30个');
       }
       const { data, code, msg } = await manualPullOrderOp({ storeId, outOrderSn: list.join(',') });
       if(code == 200){
        if(data.length > 0) {
          const columns = [
            {
              title: '三方网店订单号',
              dataIndex: 'orderSn',
              key: 'orderSn',
              width: 100,
              render: (text) => {
                return <Paragraph copyable={{ tooltips: false }} style={{ marginBottom: '0px' }}>{text}</Paragraph>
              }
            },
            {
              title: '失败原因',
              dataIndex: 'msg',
              key: 'msg',
              width: 200
            }
          ]
          const content = (
            <div>
              <h4 style={{ marginBottom: '12px' }}>以下订单同步失败，可查看具体失败原因</h4>
              <CommonTable data={data} rowkey="orderSn" scroll={{ y: 300 }} columns={columns} />
            </div>
          )
          Modal.success({
            title: '操作成功',
            content: content,
            okText: '关闭',
            width: '652px',
            onOk() {
              props?.handleOk(2);
            }
          })
        }else{
          message.success(msg);
          props?.handleOk(2);
        }
       }
    }).catch(err=>console.log(err))
  }

  return (
    <>
      <CommonModal title={{ title: '手工同步订单' }} open={true} width="600px" onOk={handleOk} onCancel={props.handleCancel}>
        <CommonForm
          formProps={{
            form,
          }}
          columns={[
            {
              block: <Alert showIcon message={<Typography as="s1">订单每5分钟整的时候会自动同步订单，未及时同步或同步延迟的话，可以手动同步订单</Typography>} />,
            },
            {
              block: (
                <SelectShopModal
                  onChange={(data) => {
                    if (data) {
                      setShopList([data]);
                    }
                    form.setFieldValue('storeId', data?.id);
                    form.validateFields()
                  }}
                >
                  <Row className={Style['shop-select-item']} style={{marginBottom:"22px"}}>
                    <Col>店铺</Col>
                    <Col flex="auto">
                      <Form.Item name="storeId" rules={[{required:true, message: '请选择店铺'}]}>
                        <Select open={false} placeholder="请选择店铺" options={shopList} />
                      </Form.Item>
                    </Col>
                  </Row>
                </SelectShopModal>
              ),
            },
            {
              name: 'outOrderSn',
              slot: <CommonTextarea showCount placeholder="请输入三方店铺订单号，换行输入，最多输入30个" rows={6} />,
            },
          ]}
        ></CommonForm>
      </CommonModal>
    </>
  );
}

export default ManuallySyncOrdersModal;
